<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
<!--    <NuxtLink class="navbar-brand" to="/todo">Stark</NuxtLink>-->
    <a class="navbar-brand" href="#">Stark</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
        <NuxtLink class="nav-link" active-class="active-link" to="/todo">
          Todo
          <span class="badge bg-danger icon-num">{{todoCount}}</span>
        </NuxtLink>

          <!-- <a class="nav-link active" aria-current="page" href="#">Todo</a> -->
        </li>
        <li class="nav-item">
          <NuxtLink class="nav-link" active-class="active-link" to="/progress">In Progress<span class="badge bg-danger icon-num">{{progressCount}}</span></NuxtLink>
          <!-- <a class="nav-link" href="#"></a> -->
        </li>
        <li class="nav-item">
          <NuxtLink class="nav-link" active-class="active-link" to="/completed">Completed</NuxtLink>
          <!-- <a class="nav-link" href="#"></a> -->
        </li>
      </ul>
      <ul class="navbar-nav user-nav" v-if="loginToken">
        <li class="nav-item user-msg" @click="addTask">
          admin
        </li>
        <li class="nav-item user-msg" @click="handleLogout">
          Logout
        </li>
      </ul>
      <ul class="navbar-nav user-nav" v-else>
        <li class="nav-item user-msg" @click="handleLogin">
          Login
        </li>
      </ul>
<!--      <div class="d-flex zixun-phone">-->
<!--        <span class="user-msg">Tony Stark</span>-->
<!--        <span class="user-msg">Log Out</span>-->
<!--      </div>-->
    </div>
  </div>
</nav>
</template>

<script setup lang="js">

import {defineProps, ref} from "vue";
import { useAuthStore } from '../store/index'
const authStore = useAuthStore();

defineProps({
  todoCount: {type: Number},
  progressCount: {type: Number},
})

const loginToken = ref('');

onMounted(() => {
  if(authStore.token) {
    loginToken.value = authStore.token;
  }
})

const handleLogout = () => {
  authStore.setToken(false);
  navigateTo('/', { redirectCode: 301 });
}

const addTask = () => {
  navigateTo('/task', { redirectCode: 301 });
}

const handleLogin = () => {
  authStore.setToken(false);
  navigateTo('/login', { redirectCode: 301 });
}

</script>

<style>

.container-fluid{
  background: #000000;
  /*height: 50px;*/
}
.container-fluid a{
  color: #cacaca;
}
.container-fluid a:hover{
  color: #cacaca;
}

.active-link{
  color: #fff !important; /* 蓝色 */
  /*font-weight: bold;*/
  /*border-bottom: 2px solid #2563eb;*/
}

.icon-num{
  margin-left: 0.5rem;
}

button:focus:not(:focus-visible){
  outline: none;
  box-shadow:0 0;
}

.navbar-toggler{
  background: #ffffff;
  padding: 0;
  height: 1.5rem;
}

#navbarNav{
  justify-content: space-between;
}

.zixun-phone {
  display: flex;
  align-items: center;
  color: #b3b3b3;
  margin-left: 20px;
  font-size: 14px;
  animation: bounce-up 2s linear infinite;
}

.user-nav{
  padding-bottom: 15px;
}

.user-msg{
  color: #cacaca;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  padding: 8px 10px 0 0;
}

.navbar{
  padding-top: 0;
  cursor: pointer;
}
/*.zx-icon {*/
/*  display: inline-block;*/
/*  width: 40px;*/
/*  height: 40px;*/
/*  margin-right: 10px;*/
/*  background: url(~/assets/images/ico_phone.png) no-repeat center;*/
/*  background-size: contain;*/
/*}*/
</style>
